<template>
  <div class="department-recommend">
    <div class="recommend-header">
      <el-page-header @back="goBack">
        <template #content>
          <span class="recommend-title">科室推荐</span>
        </template>
      </el-page-header>
      
      <div class="recommend-summary">
        <p>根据您的症状描述，为您推荐以下科室：</p>
      </div>
    </div>
    
    <div class="recommend-content">
      <div 
        v-for="(department, index) in departments" 
        :key="department.id"
        class="recommend-item"
      >
        <DepartmentCard 
          :department="department"
          :is-best="index === 0"
          @appointment="handleAppointment"
          @details="handleViewDetails"
        />
      </div>
    </div>
    
    <div class="additional-info">
      <ExaminationSuggestion 
        :examinations="examinations"
        @view-examination="handleViewExamination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElPageHeader, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import DepartmentCard from './DepartmentCard.vue'
import ExaminationSuggestion from './ExaminationSuggestion.vue'

const router = useRouter()

// 推荐科室数据
const departments = ref([
  {
    id: 1,
    name: '心内科',
    matchRate: 92,
    waiting: 8,
    waitTime: '25分钟',
    doctors: ['张医生', '李医生'],
    reason: '您的胸闷、胸痛症状与心血管疾病高度相关，建议优先就诊心内科进行专业评估。'
  },
  {
    id: 2,
    name: '呼吸内科',
    matchRate: 78,
    waiting: 12,
    waitTime: '35分钟',
    doctors: ['王医生', '赵医生'],
    reason: '气短症状可能与呼吸系统疾病有关，建议作为备选科室考虑。'
  },
  {
    id: 3,
    name: '急诊科',
    matchRate: 65,
    waiting: 3,
    waitTime: '10分钟',
    doctors: ['孙医生'],
    reason: '如果症状持续加重或出现剧烈胸痛，建议立即前往急诊科就诊。'
  }
])

// 检查项目建议
const examinations = ref([
  {
    id: 1,
    name: '心电图检查',
    purpose: '用于诊断心律失常、心肌缺血等心脏疾病',
    notice: '检查前避免剧烈运动，保持平静状态',
    process: '挂号→缴费→心电图室检查→等待报告',
    location: '门诊二楼心电图室'
  },
  {
    id: 2,
    name: '胸部CT',
    purpose: '用于检查肺部、胸腔等部位的病变',
    notice: '检查前需屏气配合，移除金属物品',
    process: '挂号→缴费→放射科检查→等待报告',
    location: '门诊一楼放射科'
  },
  {
    id: 3,
    name: '血常规检查',
    purpose: '用于评估感染、贫血等全身状况',
    notice: '采血前需空腹8小时',
    process: '挂号→缴费→检验科采血→等待报告',
    location: '门诊一楼检验科'
  }
])

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 处理预约挂号
const handleAppointment = (department) => {
  ElMessage.success(`已为您预约${department.name}，请按时就诊`)
  // 实际项目中这里会跳转到预约页面
  console.log('预约挂号:', department)
}

// 查看科室详情
const handleViewDetails = (department) => {
  ElMessage.info(`查看${department.name}详情`)
  // 实际项目中这里会跳转到科室详情页面
  console.log('查看科室详情:', department)
}

// 查看检查项目详情
const handleViewExamination = (examination) => {
  ElMessage.info(`查看${examination.name}详情`)
  console.log('查看检查项目详情:', examination)
}
</script>

<style scoped>
.department-recommend {
  padding: 20px;
}

.recommend-header {
  margin-bottom: 30px;
}

.recommend-title {
  font-size: 18px;
  font-weight: 600;
}

.recommend-summary {
  margin-top: 16px;
  padding: 16px;
  background: #f0f8ff;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
}

.recommend-content {
  margin-bottom: 30px;
}

.recommend-item {
  margin-bottom: 20px;
}

.recommend-item:last-child {
  margin-bottom: 0;
}

.additional-info {
  margin-top: 30px;
}
</style>